<template>
  <div style="position: relative;">
    <div ref="container" style="width: 400px; height: 400px;border:1px solid rgba(151, 151, 151, 0.22)" id="container">
    </div>
    <div class="footer">
      <a-icon v-if="!isFullscreen" type="fullscreen" style="color: #1890ff;font-size:30px ; "
        @click="toggleFullScreen()" />
      <a-icon v-else type="fullscreen-exit" style="color: #1890ff;font-size:30px ; " @click="toggleFullScreen()" />
    </div>
  </div>
</template>

<script>
import G6 from '@antv/g6';
import { Card } from 'ant-design-vue';
import { mapState } from 'vuex';
export default {
  name: 'Atlas',
  data() {
    return {
      graph: null,
      isFullscreen: false
    }
  },
  mounted() {
    // 组件挂载后添加事件监听器  

  },
  mounted() {
    this.initGraph();
    this.handleFullScreenChange();
  },
  methods: {
    //进去全屏
    toggleFullScreen() {
      const elem = this.$refs.container.parentNode; // 获取graph容器的父元素，通常是你想要全屏的元素  
      if (!document.fullscreenElement) {
        elem.requestFullscreen().catch(err => {
          console.error('Fullscreen request denied by browser', err);
        });
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        }
      }

    },

    handleFullScreenChange() {
      document.addEventListener('fullscreenchange', () => {
        const container = this.$refs.container
        if (document.fullscreenElement) {
          // 进入了全屏  
          const height = window.screen.height
          const width = window.screen.width
          container.style.border = null
          this.graph.changeSize(width, height)
          this.graph.fitCenter(true, true)
          this.isFullscreen = true;

        } else {
          container.style.border = "1px solid "
          this.graph.changeSize(405, 400)
          this.graph.fitCenter(true, true)
          // 退出了全屏  
          this.isFullscreen = false;
          // 这里可以添加退出全屏后的处理逻辑  
        }
      });
    },
    removeFullScreenChangeListener() {
      document.removeEventListener('fullscreenchange', this.handleFullScreenChange);
    },
    initGraph() {
      const data = {
        nodes: [
          {
            id: '0',
            label: '0',
          },
          {
            id: '1',
            label: '1',
          },
          {
            id: '2',
            label: '2',
          },
          {
            id: '3',
            label: '3',
          },
          {
            id: '4',
            label: '4',
          },
          {
            id: '5',
            label: '5',
          },
          {
            id: '6',
            label: '6',
          },
          {
            id: '7',
            label: '7',
          },
          {
            id: '8',
            label: '8',
          },
          {
            id: '9',
            label: '9',
          },
        ],
        edges: [
          {
            source: '0',
            target: '1',
          },
          {
            source: '0',
            target: '2',
          },
          {
            source: '0',
            target: '3',
          },
          {
            source: '0',
            target: '4',
          },
          {
            source: '0',
            target: '5',
          },
          {
            source: '0',
            target: '7',
          },
          {
            source: '0',
            target: '8',
          },
          {
            source: '0',
            target: '9',
          },
          {
            source: '2',
            target: '3',
          },
          {
            source: '4',
            target: '5',
          },
          {
            source: '4',
            target: '6',
          },
          {
            source: '5',
            target: '6',
          },
        ],
      };
      const container = this.$refs.container;
      const width = container.scrollWidth;
      const height = container.scrollHeight;

      const graph = new G6.Graph({
        container: container,
        width,
        height,
        linkCenter: true,

        layout: {
          type: 'force',
          preventOverlap: true,
          nodeSize: 20
        },
        modes: {
          default: ['click-select', 'drag-canvas', 'drag-node', 'zoom-canvas'],
        },
        defaultNode: {
          size: 20,
          color: '#5B8FF9',
          style: {
            lineWidth: 2,
            fill: '#C6E5FF'
          }
        },
        defaultEdge: {
          size: 1,
          color: '#e2e2e2'
        }
      });
      this.graph = graph
      graph.data(data);
      graph.render();

      // 节点拖拽开始事件  
      graph.on('node:dragstart', e => {
        // 注意：在拖拽开始时重新布局可能不是你想要的行为  
        // graph.layout(); // 移除或注释掉这一行  
        this.refreshDragedNodePosition(e);
      });

      // 节点拖拽中事件  
      graph.on('node:drag', e => {
        this.refreshDragedNodePosition(e);
      });
    },

    refreshDragedNodePosition(e) {
      const model = e.item.get('model');
      model.fx = e.x;
      model.fy = e.y;
    },
    clearStates() {
      graph.getNodes().forEach((node) => {
        graph.clearItemStates(node);
      });
      graph.getEdges().forEach((edge) => {
        graph.clearItemStates(edge);
      });
    }
  },
  watch: {
    RightHidden(val, oldval) {
      this.graph.changeSize(405, 400, true)
      this.graph.fitCenter(true, true)
    }
  },
  computed: {
    ...mapState(["RightHidden"]),
  },
};

</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  display: flex;
  justify-content: end;
  position: absolute;
  bottom: 0px;
  padding: 4px 8px;
}
</style>
